page-personal-performance {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    $green: #39b54a;
    ion-content {
        background-color: #f1f2f2 !important;
    }
    .summary {
        width: 100vw;
        margin-top: computed-vw(40);
        height: computed-vw(540);
        .detail {
            display: block;
            width: 100vw;
            height: computed-vw(267.3);
            .left {
                width: 49.75vw;
                float: left;
                height: 100%;
                background-color: #ffffff;
            }
            .right {
                width: 49.75vw;
                float: right;
                height: 100%;
                background-color: #ffffff;
            }
            p:first-child {
                margin-left: computed-vw(60);
                margin-top: computed-vw(46);
                font-size: computed-vw(54);
                color: #333333;
                margin-bottom: 0;
            }
            p:last-child {
                color: $green;
                font-size: computed-vw(60);
                text-align: right;
                margin-right: computed-vw(60);
                //margin-bottom: computed-vw(46);
                margin-top: computed-vw(31.3);
            }

        }
        .detail:nth-child(2) {
            margin-top: 0.25vw;
        }

    }
    .first {
        //border-left: 2.2vw solid $green;
        padding-left: computed-vw(30);
        font-size: 5vw;
        vertical-align: middle;
        position: relative;
        &::after{
            content:'';
            position: absolute;
            width:computed-vw(10);
            height: computed-vw(54);
            top:50%;
            left:0;
            margin-top: computed-vw(-27);
            background-color: #35ac63;
        }
    }
    ion-list {
        margin-top: computed-vw(40) !important;
        background-color: #fff;
        padding:0 5.5556vw;
    }
    .ion-list-header {
        border: none;
        height: computed-vw(170);
        width: 100%;
        overflow: hidden;
        background-color: #ffffff;
        span {
            line-height: computed-vw(170);
            color: #333333;
            font-size: computed-vw(54);
            font-weight: 400;
        }
        .toggle-panel{
            display: block;
            width: computed-vw(48);
            height: computed-vw(49);
            vertical-align: middle;
            float: right;
            //position: relative;
            //top: 50%;
            //transform: translateY(-50%);
            margin-top: 5.65vw;
            transition: 0.3s transform;
            background: url("../assets/images/policy/arrow-d.png") no-repeat;
            background-size:cover!important;
        }
        .toggle-panel.open{
            background: url("../assets/images/policy/arrow-up.png") no-repeat;
        }

        img {
            width: computed-vw(48);
            height: computed-vw(49);
            vertical-align: middle;
            float: right;
            //position: relative;
            //top: 50%;
            //transform: translateY(-50%);
            margin-top: 5.65vw;
            transition: 0.3s transform;
        }
    }
    .list-info {
        padding: 0!important;
        height: computed-vw(100);
        min-height: 0;
        .label-ios {
            margin: 0 !important;
            line-height: computed-vw(100);
        }
        .item-inner {
            border-bottom: 0.55px solid #f4f4f4 !important;
            padding-right: 0 !important;
        }
        .first-info {
            color: #666666;
            font-size: computed-vw(42);
        }
        span:last-child {
            color: $green;
            font-size: computed-vw(42);
            float: right;
        }
    }
    ion-list {
        ion-item:last-child {
            padding-bottom: computed-vw(20)!important;
            height: 10vw;
            .item-inner {
                border-bottom: none !important;
                ion-label {
                    margin-top: 0;

                }
            }
        }
    }
    ion-list:last-child {
        margin-bottom: 20vw;
    }

    .bar-button-ios {

        color: #ffffff !important;

    }

}
